<template>
  <div style="width: 100%">
    <!-- 首页 -->
    <div
      style="overflow:hidden;height: 50px; background-color: rgb(245, 247, 249); width: 100%;"
    >
      <Row style="display: flex;justify-content: flex-start;align-items: center;position: fixed;left: 0;">
        <Button
          style="
            margin: 6px;
            color: rgb(137, 145, 240);
            border: none;
            margin-left: 20px;
          "
          v-for="(btn, i) in $store.state.routerMenus"
          :key="'routerBtn' + i"
          @click="to(btn.path)"
          >{{ btn.name }}
          <icon type="ios-close" v-if="btn.close" @click.stop="closeBtn(i)" size="20"></icon>
        </Button>
      </Row>
      <Dropdown style="position: absolute; right: 30px">
        <a href="javascript:void(0)">
          <Icon type="ios-arrow-down"></Icon>
        </a>
        <template #list>
          <DropdownMenu>
            <DropdownItem>关闭左侧</DropdownItem>
            <DropdownItem>关闭右侧</DropdownItem>
            <DropdownItem>关闭全部</DropdownItem>
            <DropdownItem>全部关闭</DropdownItem>
          </DropdownMenu>
        </template>
      </Dropdown>
    </div>

    <Row>
      <Col
        span="12"
        style="border-left: solid 20px rgb(245, 247, 249); padding: 20px"
      >
        <Row>
          <Col span="6">
            <img
            :src="adminInfo.avatarUrl"
              alt=""
              style="
                height: 80px;
                width: 80px;
                border-radius: 40px;
                vertical-align: middle;
              "
            />
          </Col>
          <Col span="15">
            <div style="font-size: 22px; font-weight: 900">
              欢迎，管理员，祝你开心每一天！
            </div>
            <br />
            <div style="padding-top: 15px">
              <span>用户名： admin</span>
              <span style="position: absolute; right: 30%"
                >所属部门： 战略部</span
              >
            </div>
            <br />
            <div style="padding-top: 15px">邮箱： admin@iview.design</div>
          </Col>
          <Col span="3">
            <i
              class="ivu-icon ivu-icon-ios-sunny"
              style="font-size: 80px; color: rgb(250, 173, 20)"
            ></i>
          </Col>
        </Row>
        <Row style="margin-top: 50px; margin-left: 30px">
          <div>
            <Calendar />
          </div>
        </Row>
      </Col>

      <Col
        span="12"
        style="
          border-left: 20px solid rgb(245, 247, 249);
          border-right: 20px solid rgb(245, 247, 249);
        "
      >
        <div style="padding: 20px">
          <span
            style="
              color: rgb(64, 169, 255);
              background-color: rgb(230, 247, 255);
              font-size: 22px;
            "
            ><i class="ivu-icon ivu-icon-md-apps"></i
          ></span>
          <span style="padding-left: 5px; font-size: 22px">快捷操作</span>
          <hr
            style="
              margin-left: -20px;
              margin-right: -20px;
              margin-top: 10px;
              border: solid 1px rgb(232, 234, 236);
            "
          />
        </div>
        <div>
          <Grid :col="4" :border="false">
            <GridItem>
              <div>
                <i
                  class="ivu-icon ivu-icon-md-person ivu-block"
                  style="
                    font-size: 24px;
                    color: rgb(105, 192, 255);
                    display: flex;
                    justify-content: center;
                    margin-bottom: 20px;
                  "
                ></i>
                <div style="display: flex; justify-content: center">
                  用户管理
                </div>
              </div>
            </GridItem>
            <GridItem>
              <div>
                <i
                  class="ivu-icon ivu-icon-md-body ivu-block"
                  style="
                    font-size: 24px;
                    color: rgb(149, 222, 100);
                    display: flex;
                    justify-content: center;
                    margin-bottom: 20px;
                  "
                ></i>
                <div style="display: flex; justify-content: center">
                  角色管理
                </div>
              </div>
            </GridItem>
            <GridItem>
              <div>
                <i
                  class="ivu-icon ivu-icon-md-list ivu-block"
                  style="
                    font-size: 24px;
                    color: rgb(255, 156, 110);
                    display: flex;
                    justify-content: center;
                    margin-bottom: 20px;
                  "
                ></i>
                <div style="display: flex; justify-content: center">
                  菜单管理
                </div>
              </div>
            </GridItem>
            <GridItem
              ><div>
                <i
                  class="ivu-icon ivu-icon-md-contacts ivu-block"
                  style="
                    font-size: 24px;
                    color: rgb(179, 127, 235);
                    display: flex;
                    justify-content: center;
                    margin-bottom: 20px;
                  "
                ></i>
                <div style="display: flex; justify-content: center">
                  租户管理
                </div>
              </div></GridItem
            >
            <GridItem>
              <div>
                <i
                  class="ivu-icon ivu-icon-md-people ivu-block"
                  style="
                    font-size: 24px;
                    color: rgb(255, 214, 102);
                    display: flex;
                    justify-content: center;
                    margin-bottom: 20px;
                  "
                ></i>
                <div style="display: flex; justify-content: center">
                  部门管理
                </div>
              </div>
            </GridItem>
            <GridItem>
              <div>
                <i
                  class="ivu-icon ivu-icon-md-person-add ivu-block"
                  style="
                    font-size: 24px;
                    color: rgb(92, 219, 211);
                    display: flex;
                    justify-content: center;
                    margin-bottom: 20px;
                  "
                ></i>
                <div style="display: flex; justify-content: center">
                  岗位管理
                </div>
              </div>
            </GridItem>
            <GridItem>
              <div>
                <i
                  class="ivu-icon ivu-icon-md-book ivu-block"
                  style="
                    font-size: 24px;
                    color: rgb(255, 133, 192);
                    display: flex;
                    justify-content: center;
                    margin-bottom: 20px;
                  "
                ></i>
                <div style="display: flex; justify-content: center">
                  字典管理
                </div>
              </div>
            </GridItem>
            <GridItem>
              <div>
                <i
                  class="ivu-icon ivu-icon-md-settings ivu-block"
                  style="
                    font-size: 24px;
                    color: rgb(255, 192, 105);
                    display: flex;
                    justify-content: center;
                    margin-bottom: 20px;
                  "
                ></i>
                <div style="display: flex; justify-content: center">
                  参数管理
                </div>
              </div>
            </GridItem>
          </Grid>
        </div>

        <Row>
          <Col
            span="12"
            style="
              border-right: solid 10px rgb(245, 247, 249);
              border-top: solid 20px rgb(245, 247, 249);
              border-bottom: solid 20px rgb(245, 247, 249);
              padding: 20px;
            "
          >
            <div>
              <i
                class="ivu-icon ivu-icon-md-cart"
                style="
                  color: rgb(250, 173, 20);
                  background-color: rgb(255, 251, 230);
                "
              ></i>
              <span style="padding-left: 10px; font-size: 16px">获取授权</span>
            </div>
            <hr
              style="
                margin-left: -20px;
                margin-right: -10px;
                margin-top: 10px;
                border: solid 1px rgb(232, 234, 236);
              "
            />
            <div style="font-size: 20px; color: black; padding-top: 10px">
              Admin Cloud 商业授权
            </div>
            <div style="padding-top: 10px; font-size: 16px">
              基于 Admin Plus、iCRUD 和若依的企业级多租户权限管理开发平台
            </div>
            <ul class="ul1" style="margin-top: 30px">
              <li>获取授权</li>
              |
              <li>查看文档</li>
              |
              <li>官网</li>
            </ul>
          </Col>
          <Col
            span="12"
            style="
              border-top: solid 20px rgb(245, 247, 249);
              padding: 20px;
              border-left: solid 10px rgb(245, 247, 249);
              border-bottom: solid 20px rgb(245, 247, 249);
            "
          >
            <div>
              <i
                class="ivu-icon ivu-icon-md-cart"
                style="
                  color: rgb(250, 173, 20);
                  background-color: rgb(255, 251, 230);
                "
              ></i>
              <span style="padding-left: 10px; font-size: 16px">联系客服</span>
              <hr
                style="
                  margin-left: -20px;
                  margin-right: -10px;
                  margin-top: 10px;
                  border: solid 1px rgb(232, 234, 236);
                  margin-bottom: 10px;
                "
              />
              <img
                style="
                  width: 100%;
                  max-width: 260px;
                  border-style: none;
                  overflow-clip-margin: content-box;
                  overflow: clip;
                  /* margin-top: 20px; */
                  display: flex; /*父元素设置flex属性*/
                  justify-content: center; /*水平主轴居中*/
                  align-items: center;
                "
                src="https://file.iviewui.com/admin-cloud-dist/img/kefuwechat.d187dbc5.png"
                alt=""
              />
            </div>
          </Col>

          <Col
            span="12"
            style="
              padding: 20px;
              border-right: solid 10px rgb(245, 247, 249);
              border-bottom: solid 240px rgb(245, 247, 249);
            "
          >
            <i
              style="
                color: rgb(114, 46, 209);
                background-color: rgb(249, 240, 255);
                border-radius: 10px;
                font-size: 20px;
              "
              class="ivu-icon ivu-icon-ios-link"
            ></i>
            <span style="padding-left: 10px; margin: auto">社区</span>
            <hr
              style="
                margin-left: -20px;
                margin-right: -10px;
                margin-top: 10px;
                border: solid 1px rgb(232, 234, 236);
              "
            />
            <ul class="ul2">
              <li>
                <div class="ivu-image" style="width: 32px; height: 32px">
                  <div class="ivu-image-inner">
                    <img
                      class="ivu-image-img"
                      src="https://file.iviewui.com/admin-cloud-dist/img/icon-social-github.280e6247.svg"
                    />
                    <span>GitHub</span>
                  </div>
                </div>
              </li>
              <li>
                <div class="ivu-image" style="width: 32px; height: 32px">
                  <div class="ivu-image-inner">
                    <img
                      class="ivu-image-img"
                      src="https://file.iviewui.com/admin-cloud-dist/img/icon-social-csdn.646dbb90.svg"
                    />
                    <span>CSDN</span>
                  </div>
                </div>
              </li>
              <li>
                <div class="ivu-image" style="width: 32px; height: 32px">
                  <div class="ivu-image-inner">
                    <img
                      class="ivu-image-img"
                      src="https://file.iviewui.com/admin-cloud-dist/img/icon-social-zhihu.1dc5a4ff.svg"
                    />
                    <span>知乎专栏</span>
                  </div>
                </div>
              </li>
              <li>
                <div class="ivu-image" style="width: 32px; height: 32px">
                  <div class="ivu-image-inner">
                    <img
                      class="ivu-image-img"
                      src="https://file.iviewui.com/admin-cloud-dist/img/icon-social-juejin.b034525e.svg"
                    />
                    <span>掘金</span>
                  </div>
                </div>
              </li>
            </ul>
          </Col>

          <Col
            span="12"
            style="
              border-left: solid 10px rgb(245, 247, 249);
              border-bottom: solid 320px rgb(245, 247, 249);
              height: 420px;
            "
            ><div
              style="
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top: 30px;
              "
            >
              <img
                style="width: 30px; height: 30px"
                src="https://file.iviewui.com/admin-cloud-dist/img/logo-small.4a34a883.png"
              />
              <span>Powered By View Design</span>
            </div>
          </Col>
        </Row>
      </Col>
    </Row>
    <!-- 底部 -->
    <div style="background-color: rgb(245, 247, 249); text-align: center">
      <div style="height: 80px; background-color: rgb(245, 247, 249)"></div>
      <div>
        <ul class="ul3">
          <li>官网</li>
          <li>社区</li>
          <li>Admin Cloud</li>
        </ul>
      </div>
      <div>Copyright © 2022 View Design All Rights Reserved</div>
      <div style="height: 20px; background-color: rgb(245, 247, 249)"></div>
    </div>
  </div>
</template>
<script>
export default {
  computed:{
    adminInfo() {
      return this.$store.state.Admin.adminInfo;
    },
  },
  methods:{
    closeBtn(i){
      this.$store.commit("deleteRouterMenuItem",i)
    },
    to(path,i){
      console.log(path);
      i;
      this.$router.push(path)
    }
  }
}
</script>
<style scoped>
.ul3 li {
  padding-left: 40px;
}
.ul2 {
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
}
.ul2 span {
  margin: auto;
}
.ul1 {
  display: flex;
  justify-content: space-between;
}
.ul1 li {
  color: rgb(74, 138, 223);
}
.ivu-menu ivu-menu-light ivu-menu-horizontal {
  width: 192px;
}
li {
  display: inline;
}
</style>